<h1 class="layui-inline">角色菜单分配</h1>
<hr class="layui-bg-black">
<table id="tb_users" class="layui-table" lay-filter="users">
</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑菜单</a>
</script>
<script type="text/html" id="hidden_edit_auths">
    <form id="edit_form" class="layui-form" style="margin: 15px 30px 20px;">
        <input name="role_id" type="hidden" value="[[role_id]]"/>
        <div style="height: 100px" class="layui-form-item" id="user_auths">

        </div>
        <div style="text-align: right;">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            <button class="layui-btn" lay-submit="" lay-filter="edit_auths">
                提交
            </button>
        </div>
    </form>
</script>
<script>
    layui.use('table', function () {
        var $ = layui.$;
        var table = layui.table;
        table.render({
            elem: '#tb_users',
            url: "/main/role_list",
            id: 'idTest',
            cols: [[
                {field: 'id', width: 120, sort: true, title: 'ID'},
                {field: 'name', width: 180, sort: true, title: '角色名'},
                {
                    field: 'menus', title: '权限列表', templet: function (d) {
                        var str = "";
                        $.each(d.menus, function (index, item) {
                            str = str + item.title + "&nbsp;&nbsp;";
                        });
                        return str;
                    }
                },
                {fixed: 'right', width: 180, align: 'center', title: '操作', toolbar: '#barDemo'}
            ]]
        });
        //监听工具条
        table.on('tool(users)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                var index = layer.open({
                    title: data.name
                    , type: 1
                    , content: $("#hidden_edit_auths").html().replace("[[role_id]]", data.id)
                    , success: function () {
                        layui.use("form", function () {
                            var form = layui.form;
                            var tem = '<input value="[[id]]" type="checkbox" name="auths" title="[[title]]" lay-skin="primary">';

                            $.get("/main/menus_title", function (result) {
                                $.each(result, function (index, item) {
                                    $("#user_auths").append(tem.replace("[[id]]", item.id).replace("[[title]]", item.title));
                                });
                                $.each(data.menus, function (index, item) {
                                    $("#user_auths input[value=" + item.id + "]").attr("checked", "");
                                });
                                form.render();
                            });

                            //修改按钮事件
                            form.on("submit(edit_auths)", function (data) {
                                var load = layer.load(1, {shade: 0.3});
                                $.post("/main/role_menus_edit", $("#edit_form").serialize(), function (res) {
                                    layer.close(load);
                                    if (res.code == 1) {
                                        layui.table.reload('idTest');
                                        layer.closeAll();
                                        layer.msg("权限修改成功！", {icon: 1});
                                    } else {
                                        layer.msg(res.msg, {icon: 2});
                                    }
                                });
                                return false;
                            })
                        });
                    }
                });
                layer.style(index, {
                    width: '400px',
                });
            }
        });
    });
</script>